<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta charset="utf-8" />
    <title></title>

    <script type="text/javascript" src="jquery-1.8.2.js"></script>

    <script type="text/javascript" src="jquery-ui.js"></script>
    <script type="text/javascript" src="jquery.treetable.js">  </script>
        <script type="text/javascript" src="mytreetable.js">  </script>


    <script type="text/javascript">
       $(document).ready(function () {
          //  $("#mytable").treetable({expandable: true});
           $("#mytable").mytreetable({expandable: true});
    //  $("#example-basic").treetable({ expandable: true });
       });
    </script>
    <link rel="stylesheet" href="testcss.css">
    <style type="text/css">

        table.treetable {
            border: 1px solid #888;
            border-collapse: collapse;
            font-size: .8em;
            line-height: 1;
            margin: .6em 0 1.8em 0;
            width: 100%;
        }

        table.treetable caption {
            font-size: .9em;
            font-weight: bold;
            margin-bottom: .2em;
        }

        table.treetable thead {
            background: #aaa url(images/bg-table-thead.png) repeat-x top left;
            font-size: .9em;
        }

        table.treetable thead tr th {
            border: 1px solid #888;
            font-weight: normal;
            padding: .3em 1em .1em 1em;
            text-align: left;
        }

        table.treetable tbody tr td {
            cursor: default;
            padding: .3em 1em;
        }

        table.treetable span {
            background-position: center left;
            background-repeat: no-repeat;
            padding: .2em 0 .2em 1.5em;
        }

        table.treetable span.file {
            background-image: url(images/file.png);
        }

        table.treetable span.folder {
            background-image: url(images/folder.png);
        }

        table.treetable tr.collapsed span.indenter a {
            background-image: url(images/expand.png);
        }

        table.treetable tr.expanded span.indenter a {
            background-image: url(images/collapse.png);
        }

        table.treetable tr.selected {
            background-color: #3875d7;
            color: #fff;
        }

        table.treetable tr.collapsed.selected span.indenter a {
            background-image: url(images/expand-light.png);
        }

        table.treetable tr.expanded.selected span.indenter a {
            background-image: url(images/collapse-light.png);
        }

        table.treetable tr.accept {
            background-color: #a3bce4;
            color: #fff
        }

        table.treetable tr.collapsed.accept td span.indenter a {
            background-image: url(images/expand-light.png);
        }

        table.treetable tr.expanded.accept td span.indenter a {
            background-image: url(images/collapse-light.png);
        }

    </style>
</head>
<body>
<table id="mytable" class="treetable">
    <caption>Basic jQuery treetable Example</caption>
    <thead>
    <tr>
        <th>Tree column</th>
        <th>Additional data</th>
    </tr>
    </thead>
    <tbody>
    <tr data-tt-id="1">
        <td>Node 1: Click on the icon in front of me to expand this branch.</td>
        <td>I live in the second column.</td>
    </tr>
    <tr data-tt-id="1.1" data-tt-parent-id="1">
        <td>Node 1.1: Look, I am a table row <em>and</em> I am part of a tree!</td>
        <td>Interesting.</td>
    </tr>
    <tr data-tt-id="1.1.1" data-tt-parent-id="1.1">
        <td>Node 1.1.1: I am part of the tree too!</td>
        <td>That's it!</td>
    </tr>
    <tr data-tt-id="2">
        <td>Node 2: I am another root node, but without children</td>
        <td>Hurray!</td>
    </tr>
    <tr data-tt-id="2.1" data-tt-parent-id="2">
        <td>Node 2221.1: Look, I am a table row <em>and</em> I am part of a tree!</td>
        <td>Interesting.</td>
    </tr>
    </tbody>
</table>

</body>
</html>